<template>
	<view class="body window">

		<!-- <view class="topLine" :style="{height: topBar+'px'}"></view> -->
		<u-navbar :border-bottom='false' title="数据中心" :background="{}" :is-back="false"></u-navbar>
		<view class="data_body">
			<scroll-view class="scroll_list" scroll-y :style="{height:scrollHeight}">
				<!-- #ifdef MP-WEIXIN -->
				<view class="view_block column_align_center" style="background-color: #f6f6f6 ;">
					<u-avatar :src="index.avatarUrl" bg-color="#dddddd" size="large"></u-avatar>
					<text>{{index.nickName|| '薪薪boss'}}</text>
					<u-button size="mini" plain type="success" @click="index.token?out():login()">
						{{index.token?'退出':'登录'}}
					</u-button>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="view_block column_align_center" style="background-color: #f6f6f6 ;">
					<u-avatar src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-0e98d843ef66ae5e9ec846a7c5f98224_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625024510&t=d74955cdc57224cc3382f2420bab14b3" bg-color="#dddddd" size="large"></u-avatar>
					<text>薪薪boss</text>
					<u-button size="mini" plain type="success" >
						退出
					</u-button>
				</view>
				<!-- #endif -->
				<view class="view_block ">
					<view class="title">我的工作</view>
					 <!-- #ifdef H5 -->
					 <view style="position: relative;width: 120rpx;">
					 	<u-icon @click="routerSh" label="我的审核" label-pos='bottom' size="80"
					 		name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
					 	<u-badge type="error" :count="jz_num" :offset='[-15,-15]'></u-badge>
					 </view>
					 <!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view style="position: relative">
						<u-icon @click="routerSh" label="我的审核" label-pos='bottom' size="80"
							name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
						<u-badge type="error" :count="jz_num" :offset='[-15,-15]'></u-badge>
					</view>
					<!-- #endif -->
				</view>
				<view class="view_block .column_align_start ">
					<view class="title">数据中心</view>
					<view class="w-100 d-flex flex-column a-center j-center">
						<u-button size="medium" @click="showgs = true">{{gslist.length&&gslist.find(item=>item.value==init_gs).label}}</u-button>
						
					</view>
				</view>
				<view class="view_block">
					<view class="title">薪酬信息</view>
					<view class="d-flex w-100  j-end " >
							<view class="mr-2">
								<u-button  size="medium" @click="shownxc=true">{{nflist.length&&nflist.find(item=>item.value==init_xc).label}}</u-button>
							</view>
					</view>
					<progress-bar :content="statement" @updateRanking="updateRanking"></progress-bar>
				</view>
				<view class="view_block">
 
					<view class="title">人员信息</view>
					<u-button size="medium" @click='showz=true'>点击选择查询的时间段</u-button>
					<view style="font-size: 40rpx;margin-bottom: 50rpx; font-weight: 800;margin-top: 20rpx;">
						{{ry_text}}</view>
					

					<text-block :content="staff"></text-block>
					<view style="display: flex;justify-content: space-around;" v-if="staff">
						<view v-for="(item,index) in panelData" :key="index" class="charts-box"
							style="width: 45%;height: 200px;">
							<qiun-data-charts type="gauge"
								:opts="{title:{name: item.series[0].data * 100 + '%',color: '#24ABFD',offsetY:30,fontSize:12},subtitle: {name: item.series[0].name,color: '#666666',fontSize: 15,offsetY:70},extra:{gauge:{type:'progress',width:20,splitLine:{fixRadius:-10,width:15,},}}}"
								:chartData="item" :reshow="delayload" :canvas2d="isCanvas2d"
								:canvasId="'one_a_' + index" />
						</view>
					</view>

				</view>
				<view class="view_block">
					<view class="title font-weight font-big">营收统计</view>
				    <view class="d-flex a-center j-sb mb-5">
				    	<view >
				    		<u-radio-group v-model="valueZ" @change="radioGroupChange">
				    			<u-radio name="year">年</u-radio>
				    			<u-radio name="quarter">季度</u-radio>
				    			<u-radio name="month">月</u-radio>
				    		</u-radio-group>
				    	</view>
					<view >
							<u-button size="medium" @click="shownfy=true">{{nflist.length&&nflist.find(item=>item.value==init_yf).label}}</u-button>
					</view>
				    </view>
					<scroll-view scroll-x="true">
						<view class="charts-box" style="width: 150%;">
							<qiun-data-charts type="column" :chartData="revenue"  :canvas2d="isCanvas2d"
								:opts="{yAxis:{data:[{min:0}]},extra:{column:{ seriesGap: 10,categoryGap:30,width:20}}}" />
						</view>
					</scroll-view>

				</view>
				<view class="view_block">
					<view class="title">客户信息</view>
				<view class="d-flex a-center j-sb mb-5">
					<view >
						<u-radio-group v-model="valueC" @change="radioGroupChangez">
							<u-radio name="year">年</u-radio>
							<u-radio name="quarter">季度</u-radio>
							<u-radio name="month">月</u-radio>
						</u-radio-group>
					</view>
				<view >
				
						<u-button size="medium" @click="shownfk=true">{{nflist.length&&nflist.find(item=>item.value==init_kh).label}}</u-button>
				</view>
				</view>
					<scroll-view scroll-x="true">
						<view class="charts-box" style="width: 150%;">
							<qiun-data-charts type="column" :chartData="client" :canvas2d="isCanvas2d" :reshow="delayload" canvasId="one_b"
								:opts="{yAxis:{data:[{min:0}]},extra:{column:{ seriesGap: 10,categoryGap:30,width:20}}}" />
						</view>
						
					</scroll-view>
				</view>


			</scroll-view>
		</view>
		<u-select v-model="showgs" :list="gslist" @confirm='changeTimeGs' ></u-select>
		<u-select v-model="shownfy" :list="nflist" @confirm='changeTimeFy'></u-select>
		<u-select v-model="shownfk" :list="nflist" @confirm='changeTimeFk' ></u-select>
		<u-select v-model="shownxc" :list="nflist" @confirm='changeTimeXc' ></u-select>
		<u-calendar v-model="showz" :mode="mode" @change='changeTime'></u-calendar>
	</view>
</template>

<script>
	import MixCanvas from "../../components/canvas/mix-canvas.vue"
	import ProgressBar from "../../components/progress-bar/progress-bar.vue"
	import PieCanvas from "../../components/canvas/pie-canvas.vue"
	import RadarCanvas from "../../components/canvas/radar-canvas.vue"
	import panelData from '../../static/json/wechat/3.json';
	import RankData from '../../static/json/school/1.json';
	import ProductRateData from '../../static/json/school/2.json';
	import RadarModel from '../../static/json/school/3.json';
	import friendTrand from '../../static/json/school/4.json';
	import friendTextBlock from '../../static/json/wechat/2.json';
	import friendTrandZ from '../../static/json/wechat/4.json';
	import scanTrandPrecent from '../../static/json/user-healthy/5.json';
	let nickName = uni.getStorageSync('nickName')
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			MixCanvas,
			ProgressBar,
			PieCanvas,
			RadarCanvas,

		},
		data() {
			return {
				info: this.$store.state.userInfo, //用户数据
				title: "数据中心", //标题
				showDataTime: "today", //选中的时间
				tabCur: 0, //标签头下标
				topBar: 17, //导航高
				top: '180', //下拉栏位置
				scrollHeight: "90%", //数据展示体高度
				friendTrand,
				RankData,
				ProductRateData,
				RadarModel,
				panelData,
				delayload: false,
				friendTextBlock,
				isCanvas2d: this.$Config.ISCANVAS2D,
				show: false,
				maode: 'range',
				friendTrandZ,
				valueZ: "year",
				showz: false,
				showgs: false,
				scanTrandPrecent,
				src: 'https://www.baidu.com/link?url=30gcAopHOXP_GhhaWMPeZo9KGwQsV6URXFpT47enuMeSZxKFtaaw9k_w_qTtGIQMuzMJTNjRo9YeVdd_gwe2O5_OoRHEBGXazVsTCCuZXHbmHAjo4n97Srbzu2Fk9jt_RYFP4zeJUKsH9cFbb3s9Y0-k_cpb5plTsnm2m9QvppXF-QhKxijObrhPo2JR1ERzctUyjCxBr8HspY06_XMxxYQmyENQ5mRxCd798-bs_WByfKLzuO3kouW_lAwdTBQbgk5uDXkNhAJMt8aKdivHnlehRxPhjs6WuXNmNvHNOvNsDTYhwonlrKHKm92Uv27U0GS4dcS8rOP_J1UDSMpX71gRm879d9vmQXujt0jx192kMoPSDy6Ph5fQ4g4YDpMLSD9OAXJTNY9jHbThzaFGGffq7ggXl36_VWCWvb6jCzAXbJi6LBc2qbn10Yx2eZ3aYEZZqRYFLiUGspdOrPWGPyjU4IVWyMIeAaZw6gV4_r12dpPcuaH_vAderQYmM1_n8TSL-gvKwk9XquVQPUESd4-gASlbJs1uUJs4f1g735fhKUqsG2lyUT0i-D8x22SRHJ_NTj92F_s5BZtuulqaucQAu6c6Pz4Aanm2YWnyxYjy0IuqtPrbxJsf5hFlDqGw2TAEXl3EamE16AvhHdA6gO8kG6jQF9DPsu6SFA1Ha_cxYFEwx7Cw0LEsGcpktqx1&wd=&eqid=f7eb9c620005f75b00000006609cd311',
				jz_num: '',
				staff: [],
				mode:'',
				ssgeList: [],
				revenue: '',
				gslist: [],
				ry_text:`2021-01-01至${this.$u.timeFormat('', 'yyyy-mm-dd')}`,
				client:'',
				valueC:'year',
				shownfy:false,
				shownfk:false,
				shownxc:false,
				nflist:[],
				statement:[],
				init_gs:"", //选择公司的值
				init_yf:"", //选择营收的时间
				init_kh:"", //选择客户的时间
				init_xc:"",//选择薪酬的时间
				
			};
		},
		computed: {

			...mapState([
				'index',
			]),

		},
		methods: {

			...mapMutations([
				'out'
			]),
			routerSh(){
				this.$u.route('/pages/check/index')
			},
			changeTimeGs(e){
				this.init_gs=e[0].value
				 this.refdata()
			},
			changeTimeFy(e){
				this.init_yf=e[0].value
			   this.$minApi.revenue({
				   ssgs_id: this.init_gs,
				   data_type: this.valueZ,
				   year:e[0].value
				
			   }).then(res => {
			   	this.revenue = res.data
				
			   }) //营收统计
			},	
			changeTimeFk(e){
				this.init_kh=e[0].value
			   this.$minApi.client({
				   ssgs_id: this.init_gs,
				   data_type: this.valueC,
				   year:e[0].value
				
			   }).then(res => {
			   	this.client = res.data
				
			   }) 
			},
			changeTimeXc(e){
				this.init_xc=e[0].value
				this.$minApi.statement({
								   ssgs_id: this.init_gs,
								   year:e[0].value
								
				}).then(res => {
					this.statement = res.data
								
				}) 
			},
			gsConfirm(e) {
                  console.log(e)
			},
			changeTime(e){
			// 2021-01-01至${this.$u.timeFormat('', 'yyyy-mm-dd')}
			this.getStaff(e.endDate, e.startDate)
			  this.ry_text=`${e.startDate}至${e.endDate}`
				// this.getStaff
			},
			
			login() {
				this.$u.route('/pages/login/login')
			},
			gotoBack() {
				this.$Common.navigateBack("/index/index");
			},
			radioGroupChange(e) {
				this.$minApi.revenue({
					ssgs_id: 1,
					data_type: e
				}).then(res => {
					this.revenue = res.data
				}) //营收统计
			},
			radioGroupChangez(e) {
				this.$minApi.client({
					ssgs_id: this.init_gs,
					data_type: e,
					year:this.init_kh
				}).then(res => {
					this.client = res.data
				}) //营收统计
			},
			
			updateRanking(nVal) {
		      console.log('刷新数据',nVal);
				this.statement = nVal;
			},
			getStaff(id) {
				this.$minApi.staff({
					ssgs_id:id,
					start_date: '2021-01-01',
					end_date: this.$u.timeFormat('', 'yyyy-mm-dd')
				}).then(res => {
					this.staff = res.data
					console.log("this.staff: ", res.data);
					let zaizhi = (res.data.zaizhi / Object.values(res.data).reduce((a, b) => {
						return a + b
					})).toFixed(3)
					let lizhi = (res.data.lizhi / Object.values(res.data).reduce((a, b) => {
						return a + b
					})).toFixed(3)
					this.panelData[0].series[0].data = zaizhi
					this.panelData[1].series[0].data = lizhi
				})

			},
			initData() {
				this.$minApi.ssgeList({}).then(res => {
					let arr = [];
					let arr_nf=[];
					res.data.forEach(item => {
						arr.push({
							label: item.gongsi_name,
							value: item.gongsi_id
						})
						
					})	
					res.year.forEach(item => {
						arr_nf.push({
							label: item,
							value: item
						})
						
					})
					this.gslist = arr
					this.nflist = arr_nf
					this.init_gs=arr[0].value
					this.init_yf=arr_nf[0].value
					this.init_kh=arr_nf[0].value
					this.init_xc=arr_nf[0].value
					
	                this.refdata()
					
				}) //所属公司列表

			},
			refdata(){
				this.getStaff(this.init_gs)
				this.$minApi.statement({ssgs_id: this.init_gs ,year:this.init_xc}).then(res => {
					this.statement=res.data
				}) //薪酬信息
				this.$minApi.revenue({
					ssgs_id:this.init_gs,
					data_type: this.valueZ,
					year:this.init_gs
					
				}).then(res => {
					this.revenue = res.data
				
				}) //营收统计
				this.$minApi.mywork({ssgs_id: this.init_gs}).then(res => {
					this.jz_num = res.data.shenpi.num
				}) //我的工作
				
				this.$minApi.client({ssgs_id: this.init_gs,data_type:this.valueZ,year:this.init_kh}).then(res => {
				    this.client=res.data
				}) //客户
			},

           //获取设备信息
           async getTelephoneInfo() {
           	var telephoneInfo = await this.$Common.getTelephoneInfo();
           	let hasHeight = 0;
           	if (telephoneInfo.top >= 40) {
           		this.top = telephoneInfo.statusBarHeight * 2 + 150;
           		this.topBar = telephoneInfo.statusBarHeight;
           	}
           	// 设置滚动高度
           	const query = wx.createSelectorQuery();
           	query.select('#nav').boundingClientRect();
           	query.exec(res => {
           		res.map((item, index) => {
           			// hasHeight += item.height;
           		})
           
           	})
           },
		},
		created() {



		},
		onLoad() {
			this.initData()
			// console.log('营收统计', client);
			// console.log('人员信息', staff);
			// console.log('所属公司列表', ssgeList);
			// console.log('薪酬信息', index);
			// console.log('营收统计', revenue);
			// console.log('我的工作', mywork);
			//#ifndef H5
			uni.showShareMenu();
			//#endif
			this.getTelephoneInfo();
		}
	}
</script>

<style scoped lang="scss">
	.body {
		height: 100vh;
		margin: 0;
		padding: 0 20rpx;
		font-family: "montserrat";
		background-image: linear-gradient(125deg, #CB9FFE, #5894F7, #ABCDFA, #74A3F6, #CB9FFE);
		background-size: 400%;
		animation: bganimation 15s infinite;
	}

	page,
	body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;

	}

	.window {
		// height: 100vh;
		overflow: hidden;

		.topLine {
			width: 100%;
		}

		scroll-view {
			box-sizing: border-box;
		}

		.swiper {
			box-sizing: border-box;
		}

		.nav {
			background-size: 100% 100%;


			// .title {
			// 	color: #fff;
			// 	font-size: 30rpx;
			// 	flex: 1;
			// 	text-align: center;
			// }

			.hidden {
				visibility: hidden;
			}
		}

		.head {
			padding: 0 16rpx 14rpx 16rpx;
			color: #fff;
			background-color: #40A2ED;
			justify-content: space-between;
			font-size: 26rpx !important;

			.calendar_drag {
				width: 340rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.calendar_name {
					margin-right: 10rpx;
				}

				.icon-calendar {
					font-size: 26rpx;
					margin-top: 4rpx;
				}
			}
		}

		.data_body {
			// overflow: auto;
			text-align: center;
			color: #333333;
			background-repeat: repeat;
			height: 100vh;

			.scroll_list {
				// height: 100%;

				.view_block {
					background-color: #fff;
					padding: 16rpx 20rpx 10rpx 20rpx;
					border-radius: 20rpx;
					margin-bottom: 40rpx;

					.title {
						text-align: left;
						margin-bottom: 30rpx;
						font-size: 30rpx;
					}

					.trend_title {
						text-align: right;
						font-size: 22rpx;
						color: #ff9900;
						margin-top: 50rpx;
					}
				}
			}
		}
	}

	@keyframes bganimation {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}
</style>
